<template>
  <div>
    <haer></haer>
    <article>
      <section>
        <!-- <div class="navigation">
                    <img src="../../assets/left.png"  style="width: 15px;height: 15px;" alt="">
                    <a href="">帮助</a>
                </div> -->

        <div class="headline">
          <span>手机号登录</span>
          <p>未注册的手机号登陆成功后自动注册</p>
        </div>
        <div class="phone_number" style="margin-left: 30px; position: relative">
          <div
            style="
              height: 30px;
              width: 50px;
              border-bottom: 1px solid;
              position: absolute;
              left: 0;
              margin-top: 40px;
            "
          >
            +86
          </div>
          <input
            v-model="Num"
            style="border-bottom: 1px solid; margin-left: 10px"
            class="phonejs"
            pe="text"
            placeholder="请输入手机号码"
          />
        </div>
        <div class="phone_number" style="margin-left: 5px; position: relative">
          <input
            v-model="Numyan"
            style="border-bottom: 1px solid; margin-left: 10px"
            class="phonejs"
            id="cl"
            pe="text"
            placeholder="请输入验证码"
            maxlength="6"
            @input="v"
          />
          <div class="cxfs" @click="cxfs">重新发送（{{ nam }}</div>
        </div>
        <div class="cut_unable">
          <div class="cut_button">
            <van-icon name="exchange" /> &nbsp;
            <p>密码登录</p>
          </div>
          <div class="phone_unable"><a href="">手机号无法使用</a></div>
        </div>

        <button @click="buy" ref="aaa">验证并登录</button>

        <div class="agreement">
          <div class="agreement1">
            <div class="nbnb">
              <input class="check" type="checkbox" style="margin-top: 0px" />
              <p>我已阅读并同意</p>
            </div>
            <a href="">《用户协议》</a>
            <a href="">《隐私政策》</a>
          </div>
          <a href="">《儿童/青少年个人信息保护政策》</a>
        </div>
        <div class="logo">
          <img src="../../assets/vx.png" alt="" />
          <img src="../../assets/icon_QQ.png" alt="" />
        </div>
      </section>
    </article>
  </div>
</template>

<script>
// import { BADQUERY } from 'dns';
import { Number_yan } from "../../api/home";
import haer from "../../components/PressUndo.vue";
export default {
  data() {
    return {
      nam: "60",
      Num: "",
      Numyan: "",
      // phone:''
      uid: "",
      phone23: "",
    };
  },
  components: {
    haer,
  },
  mounted() {
    // this.cxfs();
    setInterval(() => {
      if (this.nam > 0) {
        this.nam--;
      } else if (this.nam == 0) {
        this.num = 60;
      }
    }, 1000);
    this.phon();
  },

  methods: {
    buy() {
      // 发送验证码和手机号
      Number_yan({
        username: this.Num,
        code: this.Numyan,
        loginType: 'sms'
      })
        .then((res) => {
          // console.log(this.Num);
          // console.log(this.Numyan);
          console.log(res);
          this.res = res.data;
          this.uid = this.res.uid;
          this.phone23 = this.res.phonenum;
          this.$router.push('/Index');
          console.log(23);
        })
        .catch((rest) => {
          console.log(1234567);
          console.log(rest);
        });
    },
    cxfs() {
      //   console.log(123);
      //   //   setTimeout(() => {
      //   //     if (this.nam >= 0) {
      //   //       this.nam--;
      //   //     } else if (this.nam == 0) {
      //   //         console.log("1324");
      //   //       this.nam = 60;
      //   //     }
      //   //   }, 1000);
    },
    phon() {
      let data = JSON.parse(localStorage.getItem("phone"));
      this.Num = data + "";
      console.log(this.Num);
    },
    v() {
      if (this.Num !== "" && this.Numyan !== "") {
        this.$refs.aaa.style.background = "red";
      } else if (this.Num == "" || this.Numyan == "") {
        this.$refs.aaa.style.background = "rgb(223, 223, 223)";
      }
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}
section {
  /* width: 390px; 
    height: 740px;
    border: 1px solid black;
    margin: 0 auto;
    display: flex;
    justify-content: center; */
  margin: 0px 30px;
  margin-top: 60px;
}

.navigation {
  margin-top: 20px;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.navigation img {
  width: 20px;
  height: 20px;
}
.agreement a {
  font-size: 15px;
}
.navigation a {
  color: rgb(184, 184, 184);
}

.headline {
  width: 200px;
  height: 60px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.headline p {
  font-size: 12px;
}
form {
  width: 330px;
  height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

span {
  font-size: 25px;
}

.phone_number {
  width: 340px;
  height: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.phone_number div {
  font-size: 16px;
  margin-top: 10px;
}

.number {
  width: 300px;
  height: 40px;
  border: 1px solid;
  border-top: none;
  border-left: none;
  border-right: none;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.number1 {
  width: 300px;
  height: 40px;
  border: 1px solid;
  border-top: none;
  border-left: none;
  border-right: none;
}

.cxfs {
  position: absolute;
  top: 30px;
  left: 200px;
  /* background: #000; */
}
#cl {
  width: 305px;
  /* margin: 0 auto; */
}
input[type="password"]:focus {
  outline: none;
}

input {
  width: 250px;
  height: 40px;
  margin-top: 30px;
  border: none;
}

input[type="text"]:focus {
  outline: none;
}

.cut_unable {
  width: 340px;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.cut_button {
  height: 30px;
  font-size: 7px;
  display: flex;
}

.cut_button p {
  color: rgb(18, 150, 219);
}

.cut {
  width: 20px;
  height: 20px;
}

.phone_unable {
  width: 170px;
  height: 30px;
  font-size: 7px;
  text-align: center;
}

.phone_unable a {
  line-height: 30px;
  color: rgb(18, 150, 219);
}

button {
  width: 340px;
  height: 40px;
  border: none;

  border-radius: 20px;
  margin: 0 auto;
  font-size: 20px;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}

.verify_button a {
  color: rgb(255, 255, 255);
}

.check {
  width: 15px;
  height: 15px;
  border: 1px solid brown;
  border-radius: 39px;
}

.agreement {
  width: 300px;
  height: 60px;
  font-size: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nbnb {
  width: 120px;
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.agreement1 {
  width: 300px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.logo {
  width: 150px;
  height: 70px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 30px;
  height: 30px;
}
</style>